<template>
  <div class="manage-course">
    <div class="f-page-container">
      <div class="f-container-top">
        <div class="top-input">
          <div class="input-left">课程名称：</div>
          <div class="input-right">
            <el-input
              v-model="courseName"
              placeholder="请输入课程名称"
              clearable
            ></el-input>
          </div>
        </div>
        <div class="f-flex"></div>
        <div class="top-button">
          <div class="f-btn f-btn-blue" @click="btnQuery">查询</div>
          <div class="f-btn f-btn-white-black" @click="btnReset">重置</div>
        </div>
      </div>
      <div class="f-container-bottom">
        <course-card-list
          @eventAddCourse="openAddEditD"
          @eventEditCourse="openAddEditD"
          @eventDelCourse="openDelD"
          :data="info.data"
          v-infinite-scroll="loadData"
          infinite-scroll-disabled="disabled"
        ></course-card-list>
        <p class="loading-text" v-if="loading">加载中...</p>
        <p class="loading-text" v-if="noMore">没有更多了</p>
      </div>
    </div>

    <!-- 弹出框区域 -->
    <add-edit-course
      ref="addEditD"
      @confirm="addCourse"
      @editConfirm="editCourse"
    ></add-edit-course>
    <normal-dialog ref="delD" @confirm="delCourse"></normal-dialog>
  </div>
</template>

<script>
// 引入子组件
import CourseCardList from "./childComponents/CourseCardList";

// 引入弹出框组件
import AddEditCourse from "@cpns/content/teacher/AddEditCourse";
import NormalDialog from "@cpns/content/Dialog/NormalDialog";

export default {
  name: "ManageCourse",

  components: {
    CourseCardList,
    AddEditCourse,
    NormalDialog,
  },

  data() {
    return {
      // 当前操作课程id: 用于编辑与删除
      id: 0,
      // 可选参数: 搜索的课程名称
      courseName: "",
      // 分页请求上一页课程的最后一条记录id, 第一页默认不传或者传0
      lastCourseId: 0,
      // 每页数量 默认15条
      pageSize: 15,
      // 课程信息
      info: {
        count: 0,
        curPage: 0,
        hasNext: true,
        totalPage: 0,
        data: [],
      },
      // 当前页面卡片数量
      count: 0,
      // 滚动加载状态
      loading: false,
    };
  },

  computed: {
    // 没有更多数据了
    noMore() {
      // return this.count >= this.inf;
      console.log(`是否还有下一页 ${this.info.hasNext ? "有" : "没有"}`);
      return !this.info.hasNext;
    },

    // 是否启用滚动加载
    disabled() {
      console.log(
        `L ${this.loading} - N ${this.noMore} - ${this.loading || this.noMore}`
      );
      return this.loading || this.noMore;
    },
  },

  created() {
    this.getData();
    // TODO: 用于测试
    // this.$api.teacher.coursewareTemplate().then((res) => {
    //   console.group("课件模板url >>>");
    //   console.log(res);
    //   console.groupEnd();
    // });
  },

  methods: {
    // =========================================== 后端API对接 ===========================================
    // 「获取课程列表分页查询数据」
    getData() {
      this.loading = true;
      let obj = {
        courseName: this.courseName,
        lastCourseId: this.lastCourseId,
        pageSize: this.pageSize,
      };
      this.$api.teacher
        .courseSearch(obj)
        .then((res) => {
          console.group("课程列表分页数据 >>>");
          console.log(res);
          console.groupEnd();
          if (res.code == 0) {
            // 使用存储类解析接口数据
            let resInfo = new this.$api.teacher.CourseInfo(res.data);
            let [last] = [...resInfo.data].reverse();
            if (this.lastCourseId) {
              // 最后一条数据的id不为0 不是第一次请求了
              this.info.count = resInfo.count;
              this.info.curPage = resInfo.curPage;
              this.info.hasNext = resInfo.hasNext;
              this.info.data.push(...resInfo.data);
            } else {
              // 第一次请求 直接赋值
              this.info = resInfo;
            }
            // 获取最后一条数据的id
            this.lastCourseId = last.id;
            this.loading = false;
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {
          // console.log("请求完成");
          // this.loading = false;
        });
    },

    // 「删除课程」
    delCourseInfo() {
      this.$api.teacher.courseDel(this.id).then((res) => {
        console.group("课程删除 =>");
        console.log(res);
        console.groupEnd();
        if (res.code == 0) {
          // del(this.info.data.find((item) => item.id == this.id));
          // console.log(data);
          this.$message.success("课程删除成功");
          this.getData();
        } else {
          this.$message.error(res.message);
        }
      });
      this.$refs.delD.closeTip();
    },

    // =========================================== 前端功能 ===========================================
    // 模拟课程数据
    mockCourse() {
      let list = [];
      for (let i = 0; i < 5; i++) {
        list.push({
          id: 1,
          courseName: "测试下",
          courseDesc:
            "测试文本测试下测试下测试下测试下测试下测试下测试下测试下测试下测试下",
        });
      }
      return list;
    },

    // =========================================== 前端事件 ===========================================
    // 「底部滚动加载事件」
    loadData() {
      this.getData();
    },

    // 「点击查询」
    btnQuery() {
      this.getData();
    },

    // 「点击重置」
    btnReset() {
      this.courseName = "";
    },

    // 打开新增或编辑弹出框
    openAddEditD(item) {
      this.$refs.addEditD.showTip(item);
    },

    // 打开删除弹出框
    openDelD(item) {
      this.id = item.id;
      this.$refs.delD.showTip(`是否确认删除课程—${item.courseName}？`);
    },

    // 新增完成关闭弹窗
    addCourse(data) {
      // 头部添加「显示给用户看」
      this.info.data.unshift(new this.$api.teacher.CourseSingle(data));
      this.$refs.addEditD.closeTip();
    },

    // 编辑完成关闭弹窗
    editCourse(data) {
      this.info.data.map((item) => {
        if (item.id == data.id) {
          item.courseName = data.courseName;
          item.courseDesc = data.courseDesc;
        }
        return item;
      });
      // 头部添加「显示给用户看」
      // this.info.data.unshift(new this.$api.teacher.CourseSingle(data));
      this.$refs.addEditD.closeTip();
    },

    // 点击确认删除课程
    delCourse() {
      this.delCourseInfo();
    },
  },
};
</script>

<style lang="less" scoped>
.manage-course {
  height: 100%;
}
</style>